<template>
  <div class="page">
    <wv-group title="消费记录">
      <wv-cell title="消费类型" is-link :value="fruit.name" @click.native="fruitPickerShow = true" />
      <wv-input label="消费说明" :autofocus="true" placeholder="请输入内容" v-model="valueText" ref="firstInput"/>
      <wv-input label="金额(元)" placeholder="请输入金额" type="number" v-model="valueNumber"/>
    </wv-group>

    <wv-picker
      :visible.sync="fruitPickerShow"
      :columns="fruitColumns"
      value-key="name"
      @confirm="confirmPerson"
    />
  </div>
</template>

<script>
import { navs } from '../router'
import logoImg from '../assets/images/food.jpg'

export default {
  data () {
    return {
      logoImg,
      navs,
      keyword: '',
      valueText: '',
      valueNumber: '',
      fruit: [{name: 'Apple', age: 1}],
      fruitPickerShow: false,
      fruitColumns: [
        {
          values: [
            {
              name: '吃饭',
              price: 1.3
            },
            {
              name: 'Banana',
              price: 2.0
            },
            {
              name: 'Orange',
              price: 10
            },
            {
              name: 'Pear',
              price: 0.5
            }
          ]
        }
      ],
      componentList: []
    }
  },

  mounted () {
    navs.map(navGroup => {
      this.componentList = this.componentList.concat(navGroup.navItems)
    })
  },
  methods: {
    confirmPerson (picker) {
      this.fruit = picker.getValues()[0]
    }
  }
}
</script>

<style scoped lang="scss">
  .logo {
    display: block;
    margin: 0 auto;
    width: 75px;
  }
  .fd-btn{
    width: 160px;
    height: 160px;
    border-radius: 50%;
    font-size: 100px;
    line-height: 160px;
  }
  .page__hd {
    padding: 20px;
    .page__title {
      text-align: center;
      font-size: 20px;
      font-weight: 400;
    }
  }

  .page {
    margin-bottom: 0;
  }

  .cell-icon {
    display: block;
    margin-right: 5px;
    color: #2196f3;
    overflow: hidden;
    font-size: 20px;
    width: 25px;
    text-align: center;
  }

  .footer-copyright {
    margin: 40px 0 20px;
  }
</style>
